/**
 * 复选框组件
 * @author SPY
 * @date 2020/04/09
 */
import React from 'react';
import { Checkbox, Row, Col } from 'antd';

const { Group } = Checkbox;

export interface SimpleCheckboxProps {
  idKey?: string; // 复选框对应的id名称
  nameKey?: string; // 复选框对应的name名称
  disabledOptions?: string[]; // 要禁用的id集合
  columns?: number; // 一行显示几列,默认一行3列
  dataSource: Array<ItemProps>; // 复选框要展示的数组列表
  [x: string]: any; // 兼容antd组件默认参数传入
}

export interface ItemProps {
  [key: string]: any; // 定义对象的下标为string类型
}

const SimpleCheckbox: React.FC<SimpleCheckboxProps> = props => {
  const {
    idKey = 'id',
    nameKey = 'name',
    placeholder = '请选择',
    disabledOptions = [],
    columns = 3,
    dataSource,
    ...restProps
  } = props;
  return (
    <Group style={{ width: '100%' }} {...restProps}>
      <Row gutter={{ xs: 4, sm: 8, md: 16, xl: 24 }}>
        {dataSource.map((item: ItemProps) => {
          return (
            <Col key={item[idKey]} span={Math.floor(24 / columns)}>
              <Checkbox
                key={item[idKey]}
                value={item[idKey]}
                disabled={disabledOptions.includes(item[idKey])}
              >
                {item[nameKey]}
              </Checkbox>
            </Col>
          );
        })}
      </Row>
    </Group>
  );
};

export default SimpleCheckbox;
